<template>
	<view class="box">
		<image :src="$myRequire(shop.imagePath)" class="image"></image>
		
		<view class="box-right">
			<view class="name">{{ shop.name }}</view>
			<view class="orgPrice" :class="{'orgPrice-ani': !shop.orgPrice}">{{ orgPrice2 }}</view>
			
			<view class="box-right-1">
				<view class="prePrice">{{ prePrice2 }}</view>
				<view class="btn-item">
					<!-- <button class="btn btn-1">
						<u-icon name="star" class="icon icon-1"></u-icon>
					</button> -->
					<button class="btn btn-2" @click="addShopCar(shop)">
						<u-icon name="plus" class="icon icon-2"></u-icon>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	
	export default {
		name: 'shop-item',
		props: {
			"shop": Object
		},
		methods: {
			...mapMutations('car', ['addShopCar'])
		},
		computed: {
			orgPrice2() {
				return '￥' + this.shop.orgPrice 
			},
			prePrice2() {
				return '￥' + this.shop.prePrice
			}
		}
	}
</script>

<style>
	.box{
		display: flex;
		padding: 20rpx;
	}
	
	.box-right{
		width: calc(100% - 150rpx);
		padding-left: 20rpx;
	}
	
	.image{
		width: 150rpx;
		height: 150rpx;
		vertical-align: top;
		border-radius: 7px;
	}

	.name{
		font-size: 20px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.orgPrice{
		text-decoration: line-through;
		color: #696969;
	}
	
	.orgPrice-ani{
		visibility: hidden;
	}
	
	.prePrice{
		color: #ff3703;
		font-size: 20px;
		font-weight: 700;
	}
	
	.box-right-1{
		display: flex;
		justify-content: space-between;
		
	}
	
	.btn-item{
		display: flex;
	}
	
	.btn{
		width: 80rpx;
		height: 50rpx;
		background-color: #ff3703;
		border-radius: 7px;
	}
	
	.icon{
		position: absolute;
		left: 25rpx;
		top: 8rpx;
		color: #FFFFFF;
	}

	/* .btn-1{
		background-color: #fec908;
		border-radius: 7px 0 0 7px;
	} */

</style>
